<template>
	<uni-popup ref="paySuccess" type="bottom" :is-mask-click ="false">
		<view class="share-box">
			<view class="share-tit">支付成功 ￥{{(payParams.order_amount / 100).toFixed(2)}}</view>
			<view class="share-sub-tit">{{payParams.balance_amount > 0 ? '余额支付':''}} {{payParams.balance_amount < payParams.order_amount ? '微信支付':''}}</view>
			<view class="task-con">
				<view class="task-list flex" v-for="(item,index) in tasks" :key="item.id">
					<view class="flex-center">
						<view class="task-icon">
							<image :src="item.icon" class="icon"></image>
						</view>
						<view class="task-detail">
							<view class="task-tit"><rich-text :nodes="item.name"></rich-text></view>
							<view class="task-desc">
								{{item.desc}}
							</view>
						</view>
					</view>
					<view :class="['task-btn',item.type === 2 ? 'line': 'actual'] " @click="toLink(item)">
						<button v-if="!item.link" open-type="share" class="share-btn"></button>{{item.btnTxt}}
					</view>
				</view>
			</view>
			<view class="btn" @click="disPopUp">完成</view>
		</view>
	</uni-popup>
</template>

<script>
	import user from '../../static/images/user_icon.png';
	import speed from '../../static/images/speed_icon.png';
	import edit from '../../static/images/edit_icon.png';
	import add from '../../static/images/add_icon.png';
	import share from '../../static/images/share_icon.png';
	export default {
		data() {
			return {
				tasks: [],
				package_qty: 0
			}
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			payParams: {
				type: Object,
				default: {
					payed: true,
					accelerated_package: -1,
					order_amount: 0,
					balance_amount: 0,
					max_cashback_amount: 0,
					cashback_amount: 0,
					add_customer_service: false,
					package_qty: 1
				}
			}
		},
		watch: {
			value(nVal, oVal) {
				if (nVal) {
					this.$refs.paySuccess.open();
					let arr = [];
					if (this.payParams.max_cashback_amount > this.payParams.cashback_amount) {
						arr.push({id:1, icon: user, name: `邀请好友解锁免单额度`, desc: `最高可免单￥${(this.payParams.max_cashback_amount / 100).toFixed(2)}，当前可返￥${(this.payParams.cashback_amount / 100).toFixed(2)}`, btnTxt: '去邀请', link: '', type: 1})
					}
					arr.push({id: 2, icon: speed, name: '邀请好友加速免单', desc: '邀请好友获得加速包，提升免单速度', btnTxt: '去邀请', link: '', type: 1})
					if (this.payParams.accelerated_package === -1 && this.payParams.package_qty > 0) {
						arr.push({id: 3, icon: edit, name: '完善个人资料加速免单', desc: `完善个人资料可获得${this.package_qty}个加速包`, btnTxt: '去完善', link: '/pages/set/index', type: 2})
					}
					if (!this.payParams.add_customer_service) {
						arr.push({id: 4, icon: add, name: '添加福利官加速免单', desc: '添加福利官领取加速包，加速免单', btnTxt: '去添加', link: '/personal/about/index?id=2', type: 2})
					}
					arr.push({id: 5, icon: share ,name: '分享到微信群加速免单', desc: '分享到群内，好友注册后额外获得加速包', btnTxt: '去转发', link: '', type: 2})
					this.tasks = arr;
				};
			}
		},
		methods: {
			disPopUp() {
				this.$refs.paySuccess.close();
				this.$emit('closeShare')
			},
			onShareAppMessage() {
			    var url = 'pages/index/index?inviter=' + getApp().globalData.user.id;
			    return {
			      title: "助力好友，享受免单",
			      imageUrl: "https://files.youpaish.com/share.jpg",
			      path: url
			    };
			},
			toLink(item) {
				if (item.link) {
					uni.navigateTo({
						url: item.link
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.flex-center {
		display: flex;
		align-items: center;
	}
	.share-box {
		width: 100%;
		background-color: #F6F6F6;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		position: absolute;
		bottom: -100rpx;
		left: 0;
		z-index: 99;
		padding: 60rpx 30rpx 150rpx 30rpx;
		box-sizing: border-box;
		overflow: hidden;
		.share-tit {
			width: 100%;
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			color: #3D3D3D;
			line-height: 80rpx;
		}
		.share-sub-tit {
			color: #A1A1A1;
			font-size: 28rpx;
			line-height: 38rpx;
			text-align: center;
			margin: 10rpx auto 40rpx auto;
		}
		.task-con {
			width: 100%;
			background-color: #fff;
			border-radius: 40rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			.task-list {
				width: 100%;
				margin-bottom: 28rpx;
			}
		}
		.task-icon {
			width: 82rpx;
			height: 82rpx;
			border-radius: 50%;
			background-color: #F6F6F6;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;
			.icon {
				width: 57rpx;
				height: 57rpx;
			}
		}
		.task-tit {
			color: #3D3D3D;
			font-size: 28rpx;
			line-height: 42rpx;
			span {
				color: #F44E51;
			}
		}
		.task-desc {
			color: #A1A1A1;
			font-size: 24rpx;
			line-height: 38rpx;
			&.head {
				text-align: center;
				margin: 20rpx auto 40rpx auto;
			}
		}
		.task-btn {
			width: 110rpx;
			height: 42rpx;
			border-radius: 21rpx;
			position: relative;
			text-align: center;
			color: #3D3D3D;
			font-size: 24rpx;
			&.actual {
				background-color: #FEE12D;
				line-height: 42rpx;
			}
			&.line {
				border: 2rpx solid #D8D8D8;
				line-height: 42rpx;
				border-radius: 23rpx;
			}
			.share-btn {
				opacity: 0;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
			}
		}
		.btn {
			width: 100%;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 36rpx;
			font-size: 28rpx;
			position: relative;
			text-align: center;
			color: #30240A;
			background: linear-gradient(97deg, #FADF5D 19%, #F7D35D 80%);
			margin-top: 40rpx;
		}
	}
</style>